//screen object design
function screen()
{
	this.time = 0; //this attribute will be increased by updateInterval in every draw
	this.id; // the id of the canvas element
	this.width; //the width of canvas element 
	this.height; // the height of canvas element
	this.x; //the distance from left of the page
	this.y; //the distance from top of the page
	
	this.updateInterval; // the time between frames
	this.backgroundColor; // background color of screen object
	this.drawTimer; // timer object holder

	this.ctx; // the actual ctx canvas drawing object
	
	// the objects within the screen it is a n by m double array
	this.objs;
	
	// sections of the screen it is 40 by 40 rectangulars to make 
	// item search proccess much faster
	this.sections;
	this.swidth;
	this.sheigth;
	this.sectionDim; //the dimensions of section will be sectionDim by sectionDim
	
	this.luid = 10; //last unique id of last created gui element
	
	this.focusedElement; //the focused element that all key events will be relayed
	
	/*
	initialize function, used to initialize the screen
	*/
	this.init = function(Id,uInterval,bgcolor)
	{
		this.id = Id;
		this.updateInterval = uInterval;
		this.backgroundColor = bgcolor;
		
		var canvas = document.getElementById(this.id);
		this.ctx = canvas.getContext('2d');
		
		this.height = parseInt(canvas.height);
		this.width = parseInt(canvas.width);
		this.x = parseInt(canvas.style.left);
		this.y = parseInt(canvas.style.top);
		// TESTED alert("canvas element created \n id = "+this.id+"\n width = "+this.width+"\n height = "+this.height);
		
		
		this.objs = new Array();
		
		//
		this.sectionDim = 20;
		//we must find sections' sizes
		this.swidth = Math.ceil(this.width / this.sectionDim);
		this.sheight = Math.ceil(this.height / this.sectionDim);
		
		this.sections = new Array(this.sectionDim);
		for( var i = 0; i < this.sectionDim; i++)
		{
			this.sections[i] = new Array(this.sectionDim)
			for( var j = 0; j < this.sectionDim; j++)
			{
				var data = new Object();
				data.innerObjects = new Array();
				this.sections[i][j] = data; // put data object into sections[i][j] place
				//whenever we insert a new item to screen, we should determine its position
			}
		}
			
	}
	
	//draws the screen with the objects within
	this.draw = function()
	{
		this.ctx.fillStyle = this.backgroundColor;
		this.ctx.fillRect(0,0,this.width,this.height);
		this.time += this.updateInterval;
		//now draw the items
		
		for(var i in this.objs)
		{
			for(var j in this.objs[i])
			{
			this.objs[i][j].draw(this.ctx);
			}
		}
	}
	
	
	//starts the timeout function and draws the screen every time
	this.start = function()
	{
		this.draw();
		this.drawTimer = setTimeout(function(thisObj) { thisObj.start(); }, this.updateInterval, this);
	}
	
	//stops the constant drawind of screen
	this.stop = function()
	{
		//clearTimeout(this.drawTimer);
	}
	
	/*
		this function is to use to add an item to drawing line
		every object must have a draw function with ctx parameter included
		every object must draw it self to correct position
		
		//to enable event passing mechanism we should determine the general place of the item
	*/
	this.addItem = function(item)
	{
		//first chect this.objs[item.zindex] is defined or not
		if(this.objs[item.zindex] == undefined)
		this.objs[item.zindex] = new Array();
		
		
		this.objs[item.zindex].push(item); //add item using z index
		
		//now we must add this item to into corresponding positions in sections array
		var wwidth = item.size.width;
		var hheight = item.size.height;
		var xx = item.position.x;
		var yy = item.position.y;
		
		var firstI = Math.floor(xx/this.swidth);
		var firstJ = Math.floor(yy/this.sheight);
		if(firstI < 0) firstI=0;
		if(firstJ <0) firstJ=0;  //make sure that no out of bounds error occurs
		
		//now we will determine lastI and lastJ
		var lastI = firstI + Math.ceil(wwidth/this.swidth);
		var lastJ = firstJ + Math.ceil(hheight/this.sheight);
		
		if(lastI >= this.sectionDim ) lastI = this.sectionDim-1;
		if(lastJ >= this.sectionDim ) lastJ = this.sectionDim-1; 
		
		//now we can add our variable
		
		for( var i = firstI; i <= lastI; i++)
		{
			for( var j = firstJ; j <= lastJ; j++)
			{
				this.sections[i][j].innerObjects.push(item);
				item.sectionPlaces.push(i+","+j); //we store the current i and j values to allow us later remove item from section positions in case of a position change
			}
		}
		//we added our item to corresponding places
	}
	
	/*
		this function is used to update an items position
		this is thought when item is on drag, its position is constantly changed and when it changes
		the sections must be aware of it
	*/
	this.updateItemPosition = function(item)
	{
		//first we remove our item from sections array
		for(var i in item.sectionPlaces)
		{
			var temp =item.sectionPlaces[i].split(",");
			temp = this.sections[temp[0]][temp[1]].innerObjects;
				for(var j in temp)
				{
					if(temp[j].id == item.id)
					temp.splice(j,1);  //we removed the found element
				}
		}
		item.sectionPlaces = new Array();
		//we removed all occurences of element in sectionplaces now we must re-insert it to new updated places
		//now we must add this item to into corresponding positions in sections array
		
		var wwidth = item.size.width;
		var hheight = item.size.height;
		var xx = item.position.x;
		var yy = item.position.y;
		
		var firstI = Math.floor(xx/this.swidth);
		var firstJ = Math.floor(yy/this.sheight);
		if(firstI < 0) firstI=0;
		if(firstJ <0) firstJ=0;  //make sure that no out of bounds error occurs
		
		//now we will determine lastI and lastJ
		var lastI = firstI + Math.ceil(wwidth/this.swidth)+1;
		var lastJ = firstJ + Math.ceil(hheight/this.sheight)+1;
		
		if(lastI >= this.sectionDim ) lastI = this.sectionDim-1;
		if(lastJ >= this.sectionDim ) lastJ = this.sectionDim-1; 
		
		//now we can add our variable
		
		for( var i = firstI; i <= lastI; i++)
		{
			for( var j = firstJ; j <= lastJ; j++)
			{
				this.sections[i][j].innerObjects.push(item);
				item.sectionPlaces.push(i+","+j); //we store the current i and j values to allow us later remove item from section positions in case of a position change
			}
		}
		//we added our item to corresponding places
		//we added our item to corresponding places
	}
}
globalScreen = new screen();
globalEventObject.screen = globalScreen;